<template>
	<view>
		<u-navbar :border-bottom="false" back-text="返回" back-icon-color="#000000" :backTextStyle="backTextStyle">
			<view class="nav-title">
				<text>我的收藏</text>
				<u-icon @click="removeAll" width="24" height="24" :name="appletImgUrl+'remove-icon.png'"></u-icon>
			</view>
		</u-navbar>
		<view class="tab" :style="{
				top:stickyTop + 'px'
			}">
			<u-tabs active-color="#FF4E47" @change="change" ref="tabs" item-width="375" :list="tab" :current="current"></u-tabs>
		</view>
		<u-gap></u-gap>
		<view class="list">
			<view class="center">
				<u-loading mode="circle" :show="loading"></u-loading>
			</view>
			<template v-if="!loading">
				<u-empty mode="list" :show="list == '' ? true : false"></u-empty>
				<template v-if="list != ''">
					<block v-if="current == 0" v-for="(item,index) in list" :key="item.goodsId">
						<view class="item" @click="toProductDetail(item.goodsId)">
							<!-- <u-image width="160" height="160" border-radius="10" :src="item.goodsPhoto"></u-image> -->
							<view style="width: 160rpx;">
								<u-lazy-load height="160" img-mode="aspectFill" border-radius="10" :image="item.goodsPhoto"></u-lazy-load>
							</view>
							<view class="info">
								<view class="name">{{item.goodsName}}</view>
								<view class="specifications">{{item.status ? '已收藏' : ''}}</view>
								<view class="order">
									<view class="price">￥{{item.salePrice}}</view>
									<image :src="appletImgUrl+'ljt.png'" mode="aspectFit" @click.stop="cancelCollection(item.goodsId)"></image>
								</view>
							</view>
						</view>
					</block>
					<block v-if="current == 1" v-for="(item,index) in list" :key="index">
						<view class="item" @click="$u.route('/pages/other/newStoreDetail/newStoreDetail',{store_id:item.storeId})">
							<!-- <u-image width="160" height="160" border-radius="10" :src="item.imgLogo"></u-image> -->
							<view style="width: 160rpx;">
								<u-lazy-load height="160" img-mode="aspectFill" border-radius="10" :image="item.imgLogo"></u-lazy-load>
							</view>
							<view class="info">
								<view class="name">{{item.name}}</view>
								<view class="specifications">收藏时间：{{item.updateTime}}</view>
								<view class="order">
									<view class="price">
										<u-rate active-color="#EABC05" inactive-color="#AAAAAA" inactive-icon="star-fill" :count="5" v-model="value"></u-rate>
										<text style="font-weight: normal;margin-left: 15rpx;color: #EABC05;">5.0</text>
									</view>
									<image :src="appletImgUrl+'ljt.png'" mode="aspectFit" @click.stop="cancelCollection(item.goodsId)"></image>
								</view>
							</view>
						</view>
					</block>
					<u-loadmore :status="status"></u-loadmore>
					<u-gap></u-gap>
				</template>
			</template>
		</view>
		<u-modal @cancel="cancel" @confirm="confirm" show-cancel-button confirm-color="#FF4E47" v-model="show" :content="'确认取消该收藏吗？'"></u-modal>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				current: 0,
				show: false,
				status: 'loadmore',
				value: 5,
				backTextStyle: {
					color: '#000000'
				},
				tab: [{
					name: '商品'
				}],
				list: [],
				loading: true,
				stickyTop: 0
			};
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.pageNo++
			this.status = 'loading'
			this.getList(res => {
				if (res) {
					this.list = this.list.concat(res.list)
					this.status = 'loadmore'
				} else {
					this.status = 'nomore'
				}
			})
		},
		onLoad() {
			this.pageNo = 1
			this.getList(res => {
				this.list = res
				this.loading = false
				if (this.list.length < 10) {
					this.status = 'nomore'
				}
			}, error => {
				this.loading = false
			})
			this.stickyTop = uni.getSystemInfoSync().statusBarHeight + 44
		},
		methods: {
			removeAll() {
				uni.showToast({
					title: '后续开放！',
					icon: 'none'
				});
			},
			confirm() {
				if (this.current == 0) {
					this.$u.get('goods/goodsCollect/' + this.list[this.goodsIndex].goodsId).then(res => {
						this.list.splice(this.goodsIndex, 1)
						uni.showToast({
							title: '已取消'
						})
					})
				} else {
					this.$u.post('sellerstorecollect/save', {
						storeId: this.list[this.goodsIndex].storeId,
						status: 0
					}).then(res => {
						this.list.splice(this.goodsIndex, 1)
						uni.showToast({
							title: '已取消'
						});
					})
				}
			},
			cancel() {
				this.goodsIndex = false
			},
			toProductDetail(goodsId) {
				this.$u.route('/pages/productDetail/productDetail?id=' + goodsId)
			},
			cancelCollection(goodsId) {
				this.show = true
				this.goodsIndex = this.list.findIndex(item => item.goodsId == goodsId)
			},
			getList(callback, fail = () => {}) {
				if (this.current == 1) {
					this.$u.post('sellerstorecollect/list', {
						pageNo: this.pageNo,
						pageSize: 10
					}).then(res => {
						if (res.list != '') {
							res.list.forEach(item => {
								item.imgLogo = this.imageURL + item.imgLogo
							})
						}
						callback(res.list)
					}).catch(error => {
						fail(error)
					})
					return
				}
				this.$u.post('goods/goodsCollectList', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					if (res.list) {
						res.list.forEach(item => {
							let transformationArray = item.goodsPhoto.split(',')
							item.goodsPhoto = this.imageURL + transformationArray[0]
						})
					}
					callback(res.list == undefined ? [] : res.list)
				}).catch(error => {
					fail(error)
				})
			},
			change(index) {
				this.current = index;
				this.loading = true
				this.status = 'loading'
				this.pageNo = 1
				this.getList(res => {
					this.list = res
					this.loading = false
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
				}, error => {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab {
		position: sticky;
		left: 0;
		z-index: 10;
	}

	.center {
		display: flex;
		justify-content: center;
	}

	.list {
		margin: 0 30rpx;

		.item {
			background-color: #FFFFFF;
			padding: 30rpx;
			border-radius: 20rpx;
			display: flex;
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.info {
				flex: 1;
				margin-left: 20rpx;
				position: relative;

				.order {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					z-index: 2;
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.price {
						color: #FF4E47;
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.specifications {
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #A5A4A4;
				}

				.name {
					font-size: 28rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.nav-title {
		position: absolute;
		width: 138px;
		left: 375rpx;
		transform: translateX(-50%);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 16px;
			font-weight: 700;
			// font-weight: bold;
			margin-right: 15rpx;
		}
	}

	page {
		background-color: #f7f7f7;
	}
</style>
